'use client';

import { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useSharedData } from '@/modules/application/sharedDataContext';

export default function SharedDataDemoPage() {
  const { userInfo, theme, notifications, updateUserInfo, toggleTheme, addNotification, clearNotifications } = useSharedData();
  const [name, setName] = useState(userInfo?.name || '');
  const [email, setEmail] = useState(userInfo?.email || '');
  const [notificationText, setNotificationText] = useState('');

  const handleSaveUserInfo = () => {
    updateUserInfo({ name, email });
    addNotification(`User info updated: ${name}`);
  };

  const handleAddNotification = () => {
    if (notificationText.trim()) {
      addNotification(notificationText);
      setNotificationText('');
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
      <div className="max-w-4xl mx-auto space-y-8">
        <h1 className="text-3xl font-bold">Shared Data Demo</h1>
        
        <Card>
          <CardHeader>
            <CardTitle>User Information</CardTitle>
            <CardDescription>Update your user information that will be shared across pages</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Enter your name"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter your email"
              />
            </div>
            <Button onClick={handleSaveUserInfo}>Save User Info</Button>
            
            {userInfo && (
              <div className="mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-md">
                <h3 className="font-medium">Current User Info:</h3>
                <p>Name: {userInfo.name}</p>
                <p>Email: {userInfo.email}</p>
              </div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Theme Settings</CardTitle>
            <CardDescription>Toggle between light and dark themes</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center space-x-4">
              <span>Current theme: <strong>{theme}</strong></span>
              <Button onClick={toggleTheme}>
                Switch to {theme === 'light' ? 'Dark' : 'Light'} Theme
              </Button>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Notifications</CardTitle>
            <CardDescription>Add and view notifications shared across pages</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="notification">Add Notification</Label>
              <div className="flex space-x-2">
                <Input
                  id="notification"
                  type="text"
                  value={notificationText}
                  onChange={(e) => setNotificationText(e.target.value)}
                  placeholder="Enter notification text"
                />
                <Button onClick={handleAddNotification}>Add</Button>
              </div>
            </div>
            
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <h3 className="font-medium">Notification History:</h3>
                <Button variant="outline" onClick={clearNotifications} size="sm">
                  Clear All
                </Button>
              </div>
              
              {notifications.length > 0 ? (
                <ul className="space-y-2">
                  {notifications.map((notification, index) => (
                    <li key={index} className="p-2 bg-gray-100 dark:bg-gray-800 rounded-md">
                      {notification}
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="text-gray-500 italic">No notifications yet</p>
              )}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}